<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		
		<link rel="stylesheet" href="../../../css/Semantic-UI-CSS-master/semantic.min.css"/>
		
		<link rel="stylesheet" href="../../../js/layui/css/layui.css" media="all">
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
		<script src="../../../js/vue/vue.js"></script>
		<style>
			.container {
				padding-top: 10px;
				margin-left: 10px;
			}
			
			#zth-top-icon{
				font-size: 25px;
				width: 50px;
				cursor: pointer;
				
			}
			
			.pass{
				display: inline-block;
				width: 100px;
				text-align: center;
				margin-left: 30px;
				background: green;
				color:white;
				border-radius:5px; 
				font-family: '楷体'
			}
			.not{
				display: inline-block;
				width: 100px;
				text-align: center;
				margin-left: 30px;
				background: red;
				color:white;
				border-radius:5px; 
				font-family: '楷体'
			}
			.zth-top-text{
				border-bottom: 2px #009E94 solid;
				line-height: 30px;
				padding-left: 20px;
				font-size: 18px;
				font-family: "楷体";
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<div class="zth-top-text">友情链接</div>
			<div class="container">
				<div class="demoTable">
					<div class="zth-zth-icons">
						<script type="text/html" id="toolbarDemo">
							<i class="plus icon " lay-event="add" id="zth-top-icon"></i>
							<i class="pencil alternate icon" lay-event="edit" id="zth-top-icon"></i>
							<i class="trash alternate icon" lay-event="delBatch" id="zth-top-icon"></i>
					</script>
					</div>
					<table class="layui-hide" id="test" lay-filter="test"></table>
				</div>
			</div>
			</div>
			<script src="../../../js/layui/layui.js" charset="utf-8"></script>
			<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
			<script>
				layui.use('table', function() {
					var table = layui.table;

					//方法级渲染
					table.render({
						elem: '#test',
						url: '/ssb/link/linkAll',
						toolbar : '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
						id : 'testReload',
						cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
							,
						cols: [
							[{
									type: 'checkbox'
								}, {
									field: 'link_name',
									title: '网站名称',
									width: 200
								}, {
									field: 'link_url',
									title: '网站链接'
								}
								, {
									field: 'link_description',
									title: '网站描述',
									
								}, {
									field: 'link_rank',
									title: '排序值',
									sort: true
									
								}, {
									field: 'create_time',
									title: '添加时间',
									
								}

							]
						],
						page: true,
						parseData: function(res) { //将原始数据解析成 table 组件所规定的数据
							 res.status = 0;
							return {
								"code": res.code, //解析接口状态
								"msg": res.message, //解析提示文本
								"count": res.count, //解析数据长度
								"data": res.data //解析数据列表
								//解析数据列表
							}; 
						}
					});

					var $ = layui.$,
						active = {
							reload: function() {
								var demoReload = $('#demoReload');

								//执行重载
								table.reload('testReload', {
									page: {
										curr: 1
										//重新从第 1 页开始
									},
									where: {
										key: {
											id: demoReload.val()
										}
									}
								}, 'data');
							}
						};
					
					
					//头工具栏事件
					table.on('toolbar(test)', function(obj) {
						var checkStatus = table.checkStatus(obj.config.id);
						var data = checkStatus.data;
						switch (obj.event) {
						case 'add':
							
							layer.open({
								type : 2,
								area : [ '600px', '500px' ],
								fixed : false, //不固定
								maxmin : true,
								content : 'add.html'
							});
							
							break;
						case 'edit':
							if (data.length == 0) {
								layer.msg('请选择要编辑的内容');
							}else if(data.length == 1){
								//iframe层-父子操作
								layer.open({
									type : 2,
									area : [ '500px', '500px' ],
									fixed : false, //不固定
									maxmin : true,
									content : 'edit.html?link_id='+data[0].link_id
								});
								
							}else{
								layer.msg('该程序猿比较懒，只可以编辑一条');
							}
		
							break;
						case 'delBatch':
							
							if (data.length == 0) {
								layer.msg('请选择要删除的数据');
							} else {
								layer.confirm('真的删除行吗', function(index) {
									layer.close(index);
									//删除数据逻辑
									//获取要删除数据的id
									var ids = [];
									for (var i = 0; i < data.length; i++) {
										ids.push(data[i].link_id);
									}
		
									$.ajax({
										url : "/ssb/link/deleteBatch",
										data : {
											"ids" : ids
										},
										success : function(res) {
											if (res > 0) {
												layer.alert("删除成功！");
												//执行重载
												table.reload('testReload');
											} else {
												layer.alert("删除失败！");
											}
										}
									}); 
								});
							}
		
							break;
						};
					}); 

				});
			</script>

	</body>
</html>
